<!--
 * @Date: 2022-03-21 14:53:52
 * @LastEditors: xinfei
 * @LastEditTime: 2022-05-27 10:56:50
 * @FilePath: \low-code\docs\nc-sub-table\src\index.vue
-->

<script>
  import { guid } from 'csnc-utility-js';

  export default {
    name: 'NcSubTable',
    components: {},
    props: {
      options: {
        type: Object,
        default: () => ({
          border: false,
          index: false,
          checkbox: false
        })
      },
      tableColumns: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        tableData: [],
        multipleSelection: []
      };
    },
    computed: {
      itemKey() {
        return function (list = []) {
          return list.filter((i) => Boolean(i.id));
        };
      }
    },
    created() {},
    methods: {
      handleAdd() {
        this.tableData.push({ id: guid() });
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      handleDel() {
        const selectIds = this.multipleSelection.map((i) => i.id);
        this.tableData = this.tableData.filter((item) => selectIds.indexOf(item.id) < 0);
      },
      selectionChange(val) {
        this.multipleSelection = val;
      }
    }
  };
</script>
<template>
  <div class="sub-table-container">
    <div class="tool">
      <NstdButton type="primary" @click="handleAdd">新增</NstdButton>
    </div>
    <NstdBizTable
      ref="multipleTable"
      row-key="id"
      :data="tableData"
      :border="options.border"
      :max-height="'400px'"
      @selection-change="selectionChange"
    >
      <NstdTableColumn type="selection" width="55" align="center" v-if="options.checkbox" />
      <NstdTableColumn type="index" label="序号" align="center" width="60px" v-if="options.index" />
      <NstdTableColumn
        :label="item.label"
        :prop="item.prop"
        v-for="(item, key) in tableColumns"
        :key="key"
        align="center"
      >
        <template #default="scope">
          <component
            :is="item.component.component"
            v-bind="item.component.props"
            v-model="scope.row[item.id]"
            :class="{
              borderTop: item.component.props.borderTop,
              borderRight: item.component.props.borderRight,
              borderBottom: item.component.props.borderBottom,
              borderLeft: item.component.props.borderLeft
            }"
          >
            <template #append v-if="item.component.props.slotObject && item.component.props.slotObject.append">{{
              item.component.props.slotObject.text
            }}</template>
          </component>
        </template>
      </NstdTableColumn>
      <NstdTableColumn label="操作" align="center" width="120px">
        <template #default="scope">
          <NstdIcon @click="tableData.splice(scope.index, 1)"><Delete /></NstdIcon>
        </template>
      </NstdTableColumn>
    </NstdBizTable>
  </div>
</template>

<style lang="scss">
  .sub-table__item {
    width: 100%;
  }
</style>
